<include file="public@header">
<style>
    .kefushow{
        height: 1.2rem;
        background: #1f2630;
        box-sizing: border-box;
        padding-left: 0.25rem;
    }  
    .kefushow>div{
        border-bottom: 0.01rem solid #868c9a;
        display: flex;
        align-items: center;
        height: 1.2rem;
        box-sizing: border-box;
        padding-left: 0.1rem;
        padding-right: 0.2rem;
    }
    .kefushow>div>img{
        width: 0.6rem;
        height: 0.6rem;
        object-fit: contain;
    }
    .kefushow>div>p{
        font-size: 0.3rem;
        color: #fff;
        font-weight: bold;
        margin-left: 0.15rem;
    }
    .kefushow>div>input{
        width: 3rem;
        height: 0.6rem;
        line-height: 0.6rem;
        margin: 0;
        padding: 0;
        margin-left: auto;
        border: 0;
        font-size: 0.3rem;
        color: #858d9a;
        text-align: right;
        background: transparent;
    }
    .kefushow>div>button{
        width: 0.6rem;
        padding: 0;
        border: 0.01rem solid #edbe3a;
        font-size: 0.22rem;
        background: #29313e;
        border-radius: 0.05rem;
        color: #999999;
        margin-left: 0.15rem;
        height: 0.42rem;
        line-height: 0.4rem;
        outline: none;
    }
    .kefuall .kefushow:last-child>div{
        border: 0;
    }
</style>
<body>
    <div class="bgbg headhead">
        <h3 class="mytitle">{:lang('Online Service')}</h3>
         <div class="kefuall">
             <div class="kefushow">
                 <div>
                     <img src="__STATIC__/hybit/images/email.png" alt="">
                     <p>{:lang('Email')}</p>
                     <input type="text" readonly value="{$order.email|default=''}">
                     <button onclick="CopyUrl(this)">{:lang('Copy')}</button>
                 </div>
             </div>
             <div class="kefushow">
                 <div>
                     <img src="__STATIC__/hybit/images/skype.png" alt="">
                     <p>{:lang('Skype')}</p>
                     <input type="text" readonly value="{$order.wechat|default=''}">
                     <button onclick="CopyUrl(this)">{:lang('Copy')}</button>
                 </div>
             </div>
             <div class="kefushow">
                 <div>
                     <img src="__STATIC__/hybit/images/telegram.png" alt="">
                     <p>Telegram</p>
                     <input type="text" readonly value="{$order.telegram|default=''}">
                     <button onclick="CopyUrl(this)">{:lang('Copy')}</button>
                 </div>
             </div>
             <div class="kefushow">
                 <div>
                     <img src="__STATIC__/hybit/images/whatsup.png" alt="">
                     <p>Whatsup</p>
                     <input type="text" readonly value="{$order.whatsup|default=''}" />
                     <button onclick="CopyUrl(this)">{:lang('Copy')}</button>
                 </div>
             </div>
         </div>
         <include file="public@navbar">
    </div>
    
    <script src="__STATIC__/hybit/js/jquery.min.js"></script>
    <script>
        function CopyUrl(obj) {
            let url = $(obj).siblings('input')[0];
            console.log(url)
            url.select();
            document.execCommand("Copy");
            alert('{:lang("Copy successfully")}');
         }
    </script>
</body>
</html>